<template>
    <div class="examination-platform-check">
		<nav-header>
            <div class="zh-h5-nav" v-show="user_level === 0">
				<div 
					:class="activePanel === 'platform-check' ? 'active' : ''"
					@click="changePanel('platform-check')">本平台</div>
				<div 
					:class="activePanel === 'push-check' ? 'active' : ''" 
					@click="changePanel('push-check')">下级推送</div>
			</div>
        </nav-header>   
        <transition name="fade" mode="out-in" v-if="activePanel === 'platform-check'" >
            <div class="zh-table">
            <div class="zh-table-open clear">
				      <div class="zh-open-left fl">
                    <!-- <div class="open-width" v-if="user_level === 0">
                        <el-select v-model="platform_id" filterable placeholder="来源学校/教育局">
                            <el-option
                                v-for="item in platformList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
				              </div> -->
                    <div class="open-width" style="width: 100px;">
                        <el-select v-model="status" filterable placeholder="状态">
                            <el-option label="全部状态" :value="-1"></el-option>
                            <el-option label="未审核" :value="3"></el-option>
                            <el-option label="已通过" :value="1"></el-option>
                            <el-option label="已拒绝" :value="2"></el-option>
                        </el-select>
				            </div>
					<div class="open-width">
						<el-input placeholder="试卷名称" v-model="keyword" @keyup.enter.native="search"></el-input>
					</div>
					<el-button type="primary" @click="search">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
			</div>
            <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
				<el-table
				    :data="listData"
				    border
				    max-height="541"
                >          
				    <el-table-column
                        type="index"
				      label="序号"
				      align="center"
                        width="50"
				      show-overflow-tooltip
				      >
				    </el-table-column>
                    <el-table-column
				      prop="name"
				      label="试卷标题"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
                    <el-table-column
				      prop="source"
				      label="类型"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
                    <el-table-column
				      prop="grade"
				      label="年级"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
            <el-table-column
				      prop="subject"
				      label="学科"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
                    <el-table-column
                    prop="create_time"
                    label="上传时间"
                    v-if="user_multistage === true"
                    align="center"
                    show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        label="审核状态"
                        v-if="user_multistage === true"
                        align="center"
                        show-overflow-tooltip >
                         <template slot-scope="scope">
                             <!-- （1：正常(批准）；0：已删除；2：未通过（拒绝）；3：未处理（未审核） -->
                            <el-tag  v-if="scope.row.status === 1" type="info">已通过</el-tag>
                            <el-tag  v-if="scope.row.status === 2" type="danger">已拒绝</el-tag>
                            <el-tag  v-if="scope.row.status === 3" type="warning">未审核</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        prop="handle"
                        label="操作"
                        align="center"
                        width="280"
                    >
                        <template slot-scope="scope">
                            <el-button @click="vivew(scope.row)" type="text" >预览</el-button>                        
                            <el-button v-if="scope.row.status === 1" type="text">已批准</el-button>
                            <!-- <el-button v-if="scope.row.status === 2" type="text" @click="checkReject(scope.row)">拒绝理由</el-button> -->
                            <el-button v-if="scope.row.status === 3" type="text" @click="passTrigger(scope.row)">批准</el-button>
                            <el-button v-if="scope.row.status === 3" type="text" @click="rejectTrigger(scope.row)">拒绝</el-button>                       
                            <el-button v-if="scope.row.status !== 3" type="text" class="delete-button" @click="delTrigger(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
				</el-table>
				<div class="table-pagination" v-show="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="listParam.page_index"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="listParam.page_size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
				</div>
			</div>
        </div>
        </transition>
        <transition name="fade" mode="out-in" v-if="activePanel === 'push-check'" >
            <zh-examination-push-check />
        </transition>
        <!-- bengin -->
        <el-dialog
            title="拒绝理由"
            :visible.sync="rejectDescFlag"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="40%"
        >
            <div v-text="rejectDesc"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectDescFlag = false">取 消</el-button>
                <el-button type="primary" @click="rejectDescFlag = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 拒绝理由end -->
        <!-- 拒绝bengin -->
        <el-dialog
            title="拒绝"
            :visible.sync="rejectWin"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="40%"
        >
            <div class="textarea-box">
                <el-form :model="rejectForm"  ref="rejectForm" label-width="80px" class="demo-ruleForm">
                <el-form-item label="拒绝理由" prop="txt" :rules="[{required: true,message: '请填写拒绝理由',validator: checkValue}]">
                    <el-input type="textarea" placeholder="在此填写拒绝理由..." v-model="rejectForm.txt" :maxlength="100" required></el-input>
                </el-form-item>
                </el-form>
                <p class="str-num"><span v-text="rejectForm.txt.length"></span>/<span class="str-max">100</span></p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectWinHide">取 消</el-button>
                <el-button type="primary" @click="reject">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 拒绝end -->
    </div> 
</template>
<script>
export default {
    data() {
        return {
            user_multistage: JSON.parse(sessionStorage.getItem('user_multistage')), // 判断当前是否为多级版本
            user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')), /*判断当前登录会员是否教育局 */
            activePanel: 'platform-check',
            platform_id: "",
            keyword: "",
            platformList: [],
            loading: {
                status: false,
                txt: "获取数据..."
            },
            total_number: 0,
            listData: [],
            listParam:{
                study_section_id:null,
                grade_id:null,
                subject_id:null,
                version_id:null,
                source_id:null,
                keyword: '',
                page_index:1,
                page_size:10,
                data_type:2,
                status: '1,2,3',
                authonty: 1,
            },
            status: -1,
            rejectWin: false /*拒绝弹窗 */,
            rejectForm: {
                txt: "" /*拒绝理由填写 */
            },
            rejectObj: null /*拒绝对象 */,
            showVideoPlayer: false,
            playParam: { play_url: "" },
            rejectDescFlag: false,
            rejectDesc: "",
            isActive: true,
            isPDFActive: true,
            viwPdfParam:{
                src:'',
                loadedRatio: 0,
                page: 1,
                numPages: 0,
                rotate: 0,
            },
            imgVisible: false,
            imgViewUrl:'',
            voiceVisible:false,
            viewLoading:{
                status:false,
                txt:'加载数据...'
            },
            showVideoPlayer:false,
            playParam:{play_url:'',},
        }
    },
    created() {
        this.getList();
        if (Object.is(this.user_level, 0)) {
            this.get_canseeposition();
        }
    },
  methods: {
        changePanel(panel){
            this.activePanel  = panel;

            if(this.activePanel == 'platform-check' ){
                
            }
        },
        getList() {
            if (this.status == -1) {
                this.status == '1,2,3'
            }
            this.loading.status = true;
            let success = (data=>{
                if (this.status == '1,2,3') { 
                    this.status = -1;
                }
                this.loading.status = false;              
                this.listData = data.data.data;
                this.total_number = data.data.data_sum;
                // =================================================================================================================================
                delete this.listParam.examine_status;
                // =================================================================================================================================
            })
            let fail = ( data => {
                this.loading.status = false;
                // =================================================================================================================================
                delete this.listParam.examine_status;
                // =================================================================================================================================
                this.$message.error(data.msg)
            })
            // =================================================================================================================================
            this.listParam.examine_status = 1,
            // =================================================================================================================================

            //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            this.$ajax.get('api/test/test',{params: this.listParam,func:{success:success,fail:fail}})
        },
        search() {
            if (this.status == -1) { 
                this.status = '1,2,3';
            }
            this.listParam.status = this.status;
            this.listParam.platform_id = this.platform_id;
            this.listParam.keyword = this.keyword;
            this.listParam.page_index = 1;
            this.getList();
        },
        reset() {
            this.platform_id = "";
            this.keyword = "";
            this.status = -1;
            this.listParam = {
                type: 4,
                platform_id: 0,
                keyword: "",
                status: "1,2,3",
                page_index: 1,
                page_size: 10
            };
            this.getList();
        },
        del(id) {
            let params = {
                id: id,
                status: 0
                // type: 1
            };
            const success = res => {
                this.$message.success(res.msg);

                if (this.listData.length - 1 === 0) {
                    if (this.listParam.page_index > 1) {
                        this.listParam.page_index-- ;
                    } else {
                        this.listParam.page_index = 1;
                    }
                }

                this.getList();
            };
            // this.$ajax.delete("api/test/test", {  // ======================================================================
            this.$ajax.delete("api/test/delete_manage_test_revite", {
                params: params,
                func: { success: success }
            });
        },
        delTrigger(data) {
            /*删除提示 */
            let tipsTxt = `确认删除${data.name}吗？`;
            this.$confirm(tipsTxt, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.del(data.id);
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            });
        },
        pass(id) {
            /*批准*/
            let params = {
                id: id,
                status: 1
            };
            const success = res => {
                this.$message.success(res.msg);
                this.getList();
            };
            this.$ajax.put("api/test/test", params, {
                func: { success: success }
            });
        },
        passTrigger(data) {
            /*批准提示 */
            let tipsTxt = `确定批准${data.name}通过审核吗？`;
            this.$confirm(tipsTxt, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.pass(data.id);
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消批准"
                });
            });
        },
        rejectWinHide() {
            /*隐藏拒绝弹窗 */
            this.$refs.rejectForm.clearValidate();
            this.rejectWin = false;
            this.rejectObj = null;
            this.rejectForm.txt = "";
        },
        rejectTrigger(data) {
            /*拒绝弹窗 */
            this.rejectWin = true;
            this.rejectObj = data;
        },
        // reject() {
        //     /*拒绝 */
        //     let params = {
        //         id: this.rejectObj.id,
        //         comment: this.rejectForm.txt,
        //         status: 2
        //     };
        //     const success = res => {
        //         this.$message.success(res.msg);
        //         this.rejectWinHide();
        //         this.getList();
        //     };
        //     this.$ajax.put("api/test/test", params, {
        //         func: { success: success }
        //     });
        // },
        checkValue(rule, value, callback) {
            if (!checkSpace(value)) {
                callback(new Error("请输入有效值"));
            } else {
                callback();
            }
        },
        reject() {
            /*拒绝 */
            let params = {
                id: this.rejectObj.id,
                comment: this.rejectForm.txt,
                status: 2
            };
            const success = res => {
                this.$message.success(res.msg);
                this.rejectWinHide();
                this.getList();
            };
            this.$refs[`rejectForm`].validate(valid => {
                if (valid) {
                    this.$ajax.put("api/test/test", params, {
                        func: { success: success }
                    });
                } else {
                    return;
                }
            });
        },
        get_canseeposition() {
            const success = res => {
                this.platformList = res.data.data;
            };
            this.$ajax.get("api/level/get_canseeposition_school", {
                params: {},
                func: { success: success }
            });
        },        
        checkReject(data) { // 拒绝理由
            this.rejectDescFlag = true;
            this.rejectDesc = data.comment;
        },
        handleSizeChange(size) {
            this.listParam.page_size = size;
            this.getList();
        },
        handleCurrentChange(page) {
            this.listParam.page_index = page;
            this.getList();
        },
        vivew(row) {
            this.$router.push("/resources/exam/examinationPaper-view/" + row.id +"&platform-check")
        },
    }
}
</script>

<style lang="scss">
.examination-platform-check {
    .el-table__row {
        .cell {
            button {
                padding: 0;
            }
        }
    }

    .textarea-box {
        position: relative;

        .el-textarea__inner {
            min-height: 120px !important;
            resize: none;
        }
        .str-num {
            position: absolute;
            padding: 0;
            margin: 0;
            left: 0;
            bottom: 5px;
            right: 15px;
            text-align: right;
            .str-max {
                color: #ddd;
            }
        }
    }
    .el-table__body-wrapper table tbody {
        td:nth-child(8) {
            padding: 0;
        }
    }
    
		.masking{
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: .5s;
			background: rgba(0,0,0,.3);
			z-index: 4;
			.maskingBox{
				position: absolute;
				top: 15%;
				left: 50%;
				width: 800px;
				margin-left: -400px;
				background: #fff;
			}
			.masking_h{
				padding: 10px 15px;
				background: #348EFC;
				text-align: center;
				text-align-last: justify;
				>span,
				>i{
					font-size: 16px;
					text-align-last: initial;
					display: inline-block;
					vertical-align: middle;
					color: #fff;
				}
				>i{
					cursor: pointer;
				}
			}

		}

		.pdfView{
			// padding: 30px;
			max-height: 550px;
			overflow: hidden;
			overflow-y: auto;
		}
		.masking_c{
			.el-pagination{
				padding-bottom: 20px;
			}
		}

		.activeLive{
			opacity: 0;
			visibility: hidden;
		}

		// .imgVisible{
		// 	display: inline-block;
		// 	vertical-align: middle;
		// 	background: none;
		// 	text-align: left;
		// 	min-width: 550px;
		// 	min-height: 550px;
		// 	background: rgba(109, 116, 125, 0.78);
		// 	margin: 0;
		// 	.el-dialog__header{
		// 		// display: none;
		// 	}
		// 	.el-dialog__body{
		// 		text-align: center;
		// 		// padding: 0;
		// 		img{
		// 			max-width: 100%;
		// 		}
		// 	}
		// }
		.el-dialog__wrapper{
			text-align: center;
		}
    }
</style>